<!-- index.vue 2023/5/17 @wanghaoran -->
<template>
  <div>
    <div class="chart-panel">
      <line-chart v-bind="LineChartAtr"></line-chart>
    </div>
    <el-divider/>
    <div class="chart-panel">
      <cube-bar-chart v-bind="cubeBarChartAtr"></cube-bar-chart>
    </div>
    <div class="flex-row flex-space-evenly">
      <div class="flex-row-box" :style="{backgroundColor:themeColor}">1</div>
      <div class="flex-row-box" v-for="(item,index) in lighterColors" :style="{backgroundColor:item}" :key="index">
        index
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<script setup>
import {ref, reactive, onMounted} from "vue";
import moment from 'moment';
import CubeBarChart from "./charts/CubeBarChart.vue";
import LineChart from "./charts/LineChart.vue"
import Mock from "../../mock/index"
import {generateLighterColors} from "../../utils/objectUtils";

// let themeColor = "rgba(29,67,243,1)";
let themeColor = "#6c50f3";
let lighterColors = generateLighterColors(themeColor);
console.log(lighterColors)

let lineCategory = Mock.mock(`@getDatesBetween('2023-05-01','2023-05-20','YYYY-MM-DD')`)
let lineValues = lineCategory.map(e => {
  return Mock.mock(`@integer(20, 100)`)
})
const chart2Category2 = ['胜采', '东辛', '现河', '纯梁', '滨南', '临盘', '河口', '孤东', '孤岛', '桩西', '鲁胜', '新春', '石开', '东胜', '鲁明', '海洋']
const chart2Values = chart2Category2.map(e => {
  return Mock.mock(`@integer(20, 100)`)
})
const cubeBarChartAtr = ref({
  title: '分公司生产时率构成(%)',
  category: chart2Category2,
  values: chart2Values,
  themeColor: `rgba(43, 55, 66, 1)`,
})
const LineChartAtr = ref({
  title: '分公司生产时率(%)',
  seriesName: '生产时率(%)',
  category: lineCategory,
  values: lineValues,
  themeColor: `rgba(12, 88, 543, 1)`,
  chartOptions: {
    series: [
      {
        smooth: true,
        symbol: 'circle',
        itemStyle: {
          color: 'rgba(12, 88, 543, 1)',
          borderColor: "#fff",
          borderWidth: 1,
          shadowColor: '',
          shadowBlur: 0,
          shadowOffsetY: 0,
          shadowOffsetX: 0,
        },
        markPoint: {
          symbolSize: 0,
          label: {
            show: false,
          }
        },
        symbolSize: 8,
        showSymbol: true,
      },
    ]
  }
})
setTimeout(()=>{
  cubeBarChartAtr.value = {
    title: '2000后数据改变',
    category: chart2Category2,
    values: chart2Values,
    themeColor: `rgba(7, 124, 231, 1)`,
    max: 100,
  }
  console.log('2秒后重新设置数据：', cubeBarChartAtr.value)
}, 2000)
</script>

<style scoped>
.chart-panel {
  position: relative;
  height: 450px;
  width: 100%;
}

.flex-row-box {
  height: 60px;
  width: 60px;
}
</style>
